<!-- 课程详情 -->
<template>
  <el-card>
    <template #header>
      <el-button @click="$router.go(-1)">返回</el-button>
    </template>
    <div>
      <el-descriptions title="课程详情" direction="vertical" :column="2" border>
        <el-descriptions-item label="课程名称">{{form.name}}</el-descriptions-item>
        <el-descriptions-item label="课程简介">{{form.description}}</el-descriptions-item>
        <el-descriptions-item label="教师选择">{{form.teacherName}}</el-descriptions-item>
        <el-descriptions-item label="上课时间">{{form.startTime+'至'+form.endTime}}</el-descriptions-item>
        <el-descriptions-item label="学员选择">
          <template v-for="item in form.recoveryReceivers">
              {{ item.recoveryName }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="上课内容">{{form.content}}</el-descriptions-item>
        <el-descriptions-item label="课堂照片">
          <el-image v-for="i in urls" 
                :key="i"
                :src="img + '/' + i" 
                style="width: 150px; height: 150px"
                :preview-src-list="[img + '/' + i]"
                lazy
          ></el-image>
          <!-- <el-image :src="img+url" style="width: 150px; height: 150px"></el-image> -->
        </el-descriptions-item>
        <el-descriptions-item label="短视频">
          <video
            ref="myVideo"
            :poster="true"
            :src="img+'/'+form.videos"
            :controls="true"
            width="200px"
            height="200px"
          ></video>
        </el-descriptions-item>
        <el-descriptions-item label="课堂总结">{{form.summary}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "curriculumDetail",
  props: {
  },
  data() {
    return {
      loading: true,
      img: window.api.image,
      src: "/appliance/1688959173373.mp4",
      url: "/appliance/1688959134389.jpg",
      urls:[],
      form: {
        id: 0,
        institutionId: 0,
        institutionName: "",
        userId: 0,
        teacherId: 0,
        teacherName: "",
        name: "",
        description: "",
        startTime: "",
        endTime: "",
        content: "",
        photos: "",
        videos: "",
        summary: "",
        createTime: "",
        recoveryReceivers:[],
      },
     
    };
  },
  // methods: {
  // },
  mounted() {
      if (this.$route.query.id) {
        this.API.getRecoveryCourseById({ id: this.$route.query.id }).then(
          (ret) => {
            this.form = ret.data;
            this.urls = ret.data.photos.split(',');
           console.log('detail:',this.form);
          }
        );
      }
  },
};
</script>
  <style scoped lang="scss">
</style>  